html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.login-switch {
    cursor: pointer;  /* 当鼠标悬停时显示点击手形 */
}
.login-switch:hover{
    color: #1e9fff;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center; /* 使内容在垂直方向居中 */
}

.container-demo {
    padding: 20px;
    width: 100%;
    height: 430px;
    border-radius: 10px;
    display: flex; /* 启用 flex 布局 */
    justify-content: flex-start; /* 子元素靠左排列 */
    align-items: center; /* 垂直居中 */
}

.logo {
    width: 100%;
    height: 90px;
    background: #79C48C;
    border-radius: 2px;
}

.QRcode {
    width: 45%;
    height: 100%;
}

.dividingline {
    height: 90%;
    margin: 0 48px 0;
    width: 1px;
    background: #ddd;
}

.password {
    width: 55%;
    height: 100%;
}

.passfont {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -4%;
}

.passfont div {
    margin: 0 20px;
    font-size: 24px;
    color: #9499a0;
}
.login-container {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 483px;
    height: 69%;
    margin: 14px auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-left: -4%;
}
/*验证码*/
.phone-container {
    display: flex;
    align-items: center;
}
.phone-input {
    flex: 1;
    margin-right: 10px;
}
/*二维码*/
.qrcodes {
    width: 94%;
    height: 64%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 21px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 9%;
}
/*选择微信还是qq还是*/
.choose{
    width: 45%;
    height: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16% auto;
}
.choose img{
    margin: 0 10px;
}
/* 横向排列样式 */
.social-login {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 50px; /* 微信和QQ之间的间距 */
    width: 100%;
    margin-left: 13%;
}

.social-item {
    display: flex;
    flex-direction: column; /* 图标和文字垂直排列 */
    align-items: center; /* 居中对齐 */
    font-size: 14px;
    color: #333; /* 文字颜色 */
}

.social-item img {
    width: 50px; /* 图标大小 */
    height: 50px;
    margin-bottom: 8px; /* 图标和文字之间的间距 */
}

.social-item span {
    font-weight: bold;
}